<template>
  <view class="preview_map_wrap">
    <view class="preview_map_body">
      <ViewMap
        ref="viewMap"
        key="preview-map"
        :location="location"
        :markers-points="markers"
        :polyline="polyline"
        :height="mapHeight"
      />
      <view class="close_btn" @click="handleClose">
        <u-icon name="close" />
      </view>
      <view class="size_info_wrap">
        <text class="font_family icon-building_tongyong_2" />
        <view class="store-name">{{ ztStoreInfo.add_alias }}</view>
        <view class="address-box">
          <view class="store-address">{{ storeAddress }}</view>
          <view v-if="ztStoreInfo.distance" class="distance">
            {{ distance }}
          </view>
        </view>
      </view>
    </view>
  </view>
</template>
<script>
import ViewMap from '@/components/view-map/map'
import { navigateBackPrePage } from '@/common/common'
export default {
  components: { ViewMap },
  data() {
    return {
      mapHeight: 0,
      location: {},
      markers: [],
      polyline: [],
      ztStoreInfo: {},
      storeAddress: '',
      distance: ''
    }
  },
  onLoad(options) {
    const params = JSON.parse(options.params)
    this.initMapConfigData(params)
  },
  methods: {
    initMapConfigData(params) {
      const { ztStoreInfo = {}, points = [] } = params
      this.ztStoreInfo = ztStoreInfo
      this.mapHeight = this.getMapContainerHeight()
      this.location = points[0]
      this.markers = this.getMarkers(points)
      this.polyline = this.getPolyline(points)
      this.storeAddress = this.getStoreAddress()
      this.distance = this.getDistance()
    },
    getMapContainerHeight() {
      const sizeRate = uni.getSystemInfoSync().windowHeight / uni.getSystemInfoSync().windowWidth
      return Math.floor(750 * sizeRate)
    },
    handleClose() {
      navigateBackPrePage()
    },
    getMarkers(points) {
      const markers = [...points]
      if (markers.length !== 0) {
        markers[1] = {
          ...markers[1],
          iconPath: '/static/image/icon_store@2x.png',
          width: 80,
          height: 80
        }
      }
      return markers
    },
    getPolyline(points) {
      const polyline = [{
        points: [...points],
        color: '#31c27cDD',
        width: 10,
        arrowLine: true,
        borderWidth: 2
      }]
      return polyline
    },
    getStoreAddress() {
      const {
        provinceName = '',
        cityName = '',
        areaName = '',
        streetName = '',
        detail_address = ''
      } = this.ztStoreInfo ?? {}
      const address = provinceName + cityName + areaName + streetName + detail_address
      return address
    },
    getDistance() {
      const value = this.ztStoreInfo?.distance
      if (!value) return ''
      let distance = 0
      if (value < 1000) {
        distance = `${value}m`
      }
      if (value >= 1000) {
        const val = (value / 1000).toFixed(1)
        distance = `${val}km`
      }
      return distance
    },
  }
}
</script>
<style lang="scss" scoped>
.preview_map_wrap {
  height: 100%;
  .preview_map_body {
    position: relative;
    .size_info_wrap {
      position: fixed;
      left: 0;
      right: 0;
      width: 80%;
      margin: auto;
      padding:20rpx 20rpx 20rpx 64rpx;
      border-radius: $uni-border-radius-lg;
      background-color:$uni-bg-color;
      bottom: calc(100rpx + constant(safe-area-inset-bottom));
      bottom: calc(100rpx + env(safe-area-inset-bottom));
      .font_family{
        font-size: 32rpx;
        position: absolute;
        left: 24rpx;
        top:24rpx;
        color: $uni-text-color-orange;
      }
    }
    .store-name{
      height: 40rpx;
      font-size: $uni-font-size-base;
    }
    .address-box{
      padding-bottom: 24rpx;
      .store-address{
        width: calc(100% - 160rpx);
        margin: 10rpx 0 0 0;
        color: $uni-grey-666;
        font-size: $uni-font-size-sm;
        float: left;
      }
      .distance{
        max-width: 106rpx;
        padding: 0 6rpx;
        height: 32rpx;
        line-height: 32rpx;
        color: $uni-white;
        font-size: 20rpx;
        text-align: center;
        float: right;
        border-radius: $uni-border-radius-default;
        margin: 10rpx 16rpx 0 16rpx;
        background: $uni-orange;
      }
    }
  }
}

.close_btn {
  position: absolute;
  right: 20rpx;
  padding: 20rpx;
  background-color: #fff;
  border-radius: $uni-border-radius-lg;
  top: 40rpx;
}
</style>
